<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CesiumLite-开启你的三维之旅 🌏</title>
    <script type="module" src="/src/index.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      body {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        background: url(./earth.gif) no-repeat;
        background-size: 100% 100%;
      }

      .container {
        max-width: 800px;
        width: 100%;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      h1 {
        color: #2c3e50;
        text-align: center;
        font-size: 2.5em;
        margin-bottom: 40px;
        position: relative;
      }

      h1::after {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background: #3498db;
        margin: 10px auto;
        border-radius: 2px;
      }

      .nav-list {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        padding: 0;
      }

      .nav-item {
        background: white;
        border-radius: 12px;
        padding: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      }

      .nav-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      }

      .nav-link {
        text-decoration: none;
        color: #2c3e50;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        transition: color 0.3s ease;
      }

      .nav-link:hover {
        color: #3498db;
      }

      .nav-link::before {
        content: '🌏';
        margin-right: 10px;
        font-size: 1.2em;
      }

      .description {
        text-align: center;
        color: #666;
        margin-top: 30px;
        font-size: 0.9em;
      }

      .coming-soon {
        margin-top: 40px;
        text-align: center;
        color: #666;
        position: relative;
        padding: 20px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      }

      .coming-soon h2 {
        color: #2c3e50;
        font-size: 1.5em;
        margin-bottom: 10px;
      }

      .coming-soon p {
        font-size: 1.1em;
        line-height: 1.6;
      }

      .coming-soon::before {
        content: '✨';
        font-size: 2em;
        display: block;
        margin-bottom: 10px;
      }

      .coming-soon::after {
        content: '';
        display: block;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #3498db, transparent);
        margin: 20px auto 0;
      }

      .github-link {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #24292e;
        color: white;
        padding: 10px 20px;
        border-radius: 6px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
      }

      .github-link:hover {
        background: #2f363d;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      }

      .github-link::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>');
        background-size: contain;
      }

      .header-container {
        position: relative;
        margin-bottom: 40px;
      }

      .author-tag {
        position: absolute;
        right: 0;
        bottom: -25px;
        background: rgba(52, 152, 219, 0.1);
        color: #3498db;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .author-tag::before {
        content: '👨‍💻';
        font-size: 1.1em;
      }

      @media (max-width: 600px) {
        .container {
          padding: 20px;
        }
        
        h1 {
          font-size: 2em;
        }
        
        .nav-list {
          grid-template-columns: 1fr;
        }

        .github-link {
          top: 10px;
          right: 10px;
          padding: 8px 15px;
          font-size: 0.9em;
        }

        .author-tag {
          position: static;
          display: inline-block;
          margin-top: 10px;
        }
      }
    </style>
  </head>
  <body>
    <a href="https://github.com/lukeSuperCoder/cesium-lite" target="_blank" class="github-link">
      GitHub
    </a>
    <div class="container">
      <div class="header-container">
        <h1>CesiumLite-开启你的三维之旅 🌏</h1>
        <div class="author-tag">lukeSuperCoder</div>
      </div>
      <ul class="nav-list">
        <!-- 可以在这里添加更多示例链接 -->
        <li class="nav-item">
          <a href="examples/basicMap.html" target="_blank" class="nav-link">创建地图</a>
        </li>
        <li class="nav-item">
          <a href="examples/entity.html" target="_blank" class="nav-link">创建实体</a>
        </li>
        <li class="nav-item">
          <a href="examples/draw.html" target="_blank" class="nav-link">标绘测量</a>
        </li>
        <li class="nav-item">
          <a href="examples/marker.html" target="_blank" class="nav-link">标记点管理</a>
        </li>
        <li class="nav-item">
          <a href="examples/tileLayer.html" target="_blank" class="nav-link">矢量图层管理</a>
        </li>
        <li class="nav-item">
          <a href="examples/staticFileLayer.html" target="_blank" class="nav-link">静态文件图层管理</a>
        </li>
      </ul>
      <p class="description">点击上面的链接查看不同的 Cesium 示例</p>
      
      <div class="coming-soon">
        <h2>未完待续</h2>
        <p>更多精彩示例正在开发中，敬请期待！</p>
      </div>
    </div>
  </body>
</html>
